<!DOCTYPE HTML>
<html>
    <head>
    <meta charset=utf-8>
    <title>52framework - The framework from the future, HTML5, CSS3, and more!</title>
    
    <script src="../../js/modernizr-1.7.min.js"></script><!-- this is the javascript allowing html5 to run in older browsers -->
    
    <link rel="stylesheet" type="text/css" href="../../css/reset.css" media="screen" title="html5doctor.com Reset Stylesheet" />
    
    <!-- in the CSS3 stylesheet you will find examples of some great new features CSS has to offer -->
    <link rel="stylesheet" type="text/css" href="../../css/css3.css" media="screen" />
    
    <!-- general stylesheet contains some default styles, you do not need this, but it helps you keep a uniform style -->
    <link rel="stylesheet" type="text/css" href="../../css/general.css" media="screen" />
    
    <!-- grid's will help you keep your website appealing to your users, view 52framework.com website for documentation -->
    <link rel="stylesheet" type="text/css" href="../../css/grid.css" media="screen" />
    
    
    <!-- the following style is for demonstartion purposes only and is not needed for anything but inspiration -->
    <style>
		header {padding-top:25px; border-bottom:1px solid #ccc; padding-bottom:20px;}
		header .logo {font-size:3.52em;}
		header nav ul li {float:left; margin-top:12px;}
		header nav ul li a {display:block; padding:5px 15px; border-right:1px solid #eee; font-size:1.52em; font-family:Georgia, "Times New Roman", Times, serif; text-decoration:none;}
		header nav ul li a:hover {background-color:#eee; border-right:1px solid #ccc; text-shadow:-1px -1px 0px #fff;}
		header nav ul li.last a {border-right:none;}
		
		#css3 div > div {margin:0px 0px 50px 0px; padding:6px; border:1px solid #eee;}
		#grid div {text-align:center;  }
		#grid div > .col {border-bottom:1px solid #ccc; padding:10px 0px; outline:1px solid #eee;}
		
		h2 {border-bottom:1px dashed #ccc; margin-top:15px;}
		
		.documentation {display:block; background-color:#eee; padding:6px 13px; font-family:Georgia, "Times New Roman", Times, serif; color:#666; text-align:right; text-shadow:-1px -1px 0px #fff;}
		
		footer {text-align:center; color:#666; font-size:0.9em; padding:4px 0px;}
	</style>
    </head>

<body>
<div class="row">
	<header>
    	
        <div class="logo col_7 col">52framework</div><!-- logo col_7 -->
        
      <nav class="col_9 col">
        	<ul>
            	<li><a href="#navigation">navigation 1</a></li>
                <li><a href="#navigation">navigation 2</a></li>
            	<li class="last"><a href="http://www.enavu.com">enavu network</a></li>
            </ul>
        </nav><!-- nav col_9 -->
      <div class="clear"></div><!-- clear -->
    </header>
</div><!-- row -->

<!-- this section shows off the grid and how it can be used -->
<section class="row" id="grid">
	<h2>Grid Framework</h2>
    <div class="col col_8">
    	col_8
        <div class="row">
            <div class="col col_1">col_1</div>
            <div class="col col_7">col_7
                <div class="row">
                    <div class="col col_3">col_3</div>
                    <div class="col col_4">col_4</div>
                </div><!-- row -->
            </div>
        </div><!-- row -->
    </div><!-- col_8 -->
  <div class="col col_8">
    	col_8
        <div class="row">
            <div class="col col_4">4</div>
            <div class="col col_4">4</div>
        </div><!-- row -->
    </div><!-- col_8 -->
  <div class="col_16 col" style="margin-top:15px;">
    	<div class="row">
        	<div class="col col_9">col_9</div>
            <div class="col col_7">col_7</div>
        </div><!-- row -->
    </div><!-- col_16 -->
  <div class="col_16 col">
    	<a href="http://www.52framework.com/documentation/" class="documentation">Grid Framework Documentation</a>
    </div><!-- col_16 -->
</section><!-- row -->

<footer class="row">

	<div class="col_16 col">all rights reserved &copy; <a href="http://www.enavu.com">enavu network</a> | 52framework the framework from the future</div>

</footer>
</body>
</html>
